// webpack 是node写出来的 node的写法
// 图片的处理 - 4
let path = require('path')
let HtmlWebpackPlugin = require('html-webpack-plugin')
let MiniCssExtractPlugin = require('mini-css-extract-plugin')
let OptimizeCssAssetsWebpackPlugin = require('optimize-css-assets-webpack-plugin')
let UglifyjsWebpackPlugin = require('uglifyjs-webpack-plugin')
let webpack = require('webpack')
module.exports = {
    optimization: { // 优化项
        minimizer: [
            new UglifyjsWebpackPlugin({ // js打包压缩
                cache: true, // 是否用这个缓存
                parallel: true, // 是否一起压缩多个
                sourceMap: true // es6 -> es5
            }), 
            new OptimizeCssAssetsWebpackPlugin() // css打包压缩
        ]
    },
    devServer: { // 开发服务的配置
        port: 3000,
        progress: true,  // 打包是出现进度条
        contentBase: './build',
        compress: true
    },
    mode: 'development', // 模式 默认两种 production(生产模式) development(开发模式)
    entry: './src/index.js', // 入口
    output: {
        filename: 'bundle.[hash:8].js', // 打包后的文件名
        path: path.resolve(__dirname,'dist')// 路径必须是一个绝对路径
    },
    plugins: [ // 数组 放着所有的webpack插件
        new HtmlWebpackPlugin({
            template: './src/index.html',// 打包前的文件路径及文件名
            filename: 'index.html',  // 打包后的文件名
            minify: { // html打包好压缩
                removeAttributeQuotes: true, // 删除html文件的双引号
                collapseWhitespace: true // 打包成一行代码
            },
            hash: true // 给引用的文件加一个hash戳，如src='bundle.js?6272952884537966770b'
        }),
        new MiniCssExtractPlugin({ // css抽离
            filename: 'main.css' // 抽离出来的文件名
        }),
        new webpack.ProvidePlugin({ // 在每个模块中都注入$
            $: 'jquery'
        })
        // externals: { // 是外部引入的不需要打包  externals和new webpack.ProvidePlugin只要用一个
        //     jquery: '$'
        // }
    ],
    module: { // 模块
        rules: [ // 规则
            // css-loader 接受@import这种语法的，style-loader 它是把css 插入到head的标签中的，loader的特点 希望单一
            // loader的用法 字符串只用一个loader
            // 多个loader需要 [] {test: /\.css$/, use: ['style-loader','css-loader']}
            // loader 的顺序 默认是从右向左执行 从下往上执行
            // loader 还可以写成 对象的方式
            // 如 {test: /\.css$/, use: [{loader: 'style-loader'},'css-loader']}
            // 还可以处理less文件
            // {
            //     test: require.resolve('jquery'),
            //     use: 'expose-loader?$' // 将jquery设置为全局的写法
            // },
            // {
            //     test: /\.js$/,
            //     use: {
            //         loader: 'eslint-loader',
            //         options: {
            //             enforce: 'pre' //不普通的loader先执行(previous)、在普通loader之后执行(post) 
            //         }
            //     },
            // },
            {
                test: /\.html$/,
                use: 'html-withimg-loader'
            },
            {
                test: /\.(png|jpg|gif)$/,
                // 做一个限制 当我们的图片 小于多少k的时候 用base64 来转化
                // 否则用file-loader 产生真实的图片
                use: {
                    loader: 'url-loader',
                    options: {
                        limit: 200*1024
                    }
                }
            },
            {
                test: /\.js$/, // normal 普通的loader
                use: {
                    loader: 'babel-loader',
                    options: { //用babel-loader 需要把se6 -> es5
                        presets: [ // 大插件的集合
                            '@babel/preset-env'
                        ],
                        plugins: [ // 小插件 //解决es6的高级用法 如：class等等用法
                            ["@babel/plugin-proposal-decorators", { "legacy": true }], // 用于解决class的装饰器 如 @log等
                            ["@babel/plugin-proposal-class-properties", { "loose" : true }], // 用于解决class类
                            '@babel/plugin-transform-runtime' //解决相同代码共用的的问题及一些es6更高的语法
                        
                        ]
                    }
                },
                include: path.resolve(__dirname, 'src'), // 要处理的那些文件下的文件
                exclude: /node_modules/ // 限制要处理的文件
            },
            {
                // 可处理css文件
                test: /\.css$/, 
                use: [
                    MiniCssExtractPlugin.loader,
                    'css-loader',
                    'postcss-loader' // 给css3属性添加前缀 还要有一个postcss.config.js配置文件
                ]
            },
            {
                //可处理less文件 要安装(less,less-loader) 其它的类似如sass(node-sass,sass-loader),stylus(stylus,stylus-loader)
                test: /\.less$/, 
                use: [
                    MiniCssExtractPlugin.loader,
                    'css-loader', // @import  解析路径
                    'postcss-loader', // 给css3属性添加前缀 还要有一个postcss.config.js配置文件
                    'less-loader' // 把less -> css
                ]
            }
        ]
    }
}